<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head th:replace="/console/tpl/tpl-common::head('首页')"></head>
  
  <body>
    <!-- 顶部 -->
    <nav th:replace="/console/tpl/tpl-common::top"></nav>

    <div class="container-fluid">
      <div class="row">
        <!-- 左侧 -->
        <nav th:replace="/console/tpl/tpl-common::left('home')"></nav>

        <!-- 数据区 -->
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4" id="main-data">
          <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2">销售趋势图</h1>
            <div class="btn-toolbar mb-2 mb-md-0">
              <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" id="time-range-select" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i data-feather="calendar"></i>
                <span>本周</span>
              </button>
              <div class="dropdown-menu" aria-labelledby="time-range-select" style="min-width: 5rem;">
                <a class="dropdown-item" data-time-range="week" style="padding: 0.25rem 1rem; cursor: pointer;">本周</a>
                <a class="dropdown-item" data-time-range="month" style="padding: 0.25rem 1rem; cursor: pointer;">本月</a>
                <a class="dropdown-item" data-time-range="quarter" style="padding: 0.25rem 1rem; cursor: pointer;">本季度</a>
                <a class="dropdown-item" data-time-range="year" style="padding: 0.25rem 1rem; cursor: pointer;">本年</a>
              </div>
            </div>
          </div>

          <!-- 折线图 -->
          <canvas class="my-4 w-100" id="my-chart" width="900" height="380"></canvas>

          <h2>产品销售额排行</h2>
          <div class="table-responsive">
            <table class="table table-striped table-sm">
              <thead>
                <tr>
                  <th>排名</th>
                  <th>产品名称</th>
                  <th>销售额</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>华为</td>
                  <td>3000万</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>小米</td>
                  <td>2500万</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>苹果</td>
                  <td>2000万</td>
                </tr>
              </tbody>
            </table>
          </div>
        </main>
      </div>
    </div>

    <script type="text/javascript">
      feather.replace();

      // 选择趋势图展示时间
      $("#time-range-select").next().children().on("click", function (event) {
          $("#time-range-select>span").html(event.currentTarget.text);
          // 筛选时间范围
          var timeRange = event.currentTarget.dataset.timeRange;
          // TODO 更新趋势图
        });

      $(function () {
        var myChart = new Chart($("#my-chart"), {
          type: "line",
          data: {
            labels: [
              "Sunday",
              "Monday",
              "Tuesday",
              "Wednesday",
              "Thursday",
              "Friday",
              "Saturday",
            ],
            datasets: [
              {
                label: "华为",
                data: [2000, 2200, 2400, 2600, 2800, 3000, 3000],
                lineTension: 0,
                backgroundColor: "transparent",
                borderColor: "#FF4500",
                borderWidth: 4,
                pointBackgroundColor: "#FF4500",
              },
              {
                label: "小米",
                data: [2700, 2600, 2700, 2500, 2700, 2600, 2700],
                lineTension: 0,
                backgroundColor: "transparent",
                borderColor: "#007BFF",
                borderWidth: 4,
                pointBackgroundColor: "#007BFF",
              },
              {
                label: "苹果",
                data: [3000, 3000, 2800, 2600, 2400, 2200, 2000],
                lineTension: 0,
                backgroundColor: "transparent",
                borderColor: "#FFFF00",
                borderWidth: 4,
                pointBackgroundColor: "#FFFF00",
              },
            ],
          },
          options: {
            scales: {
              yAxes: [
                {
                  ticks: {
                    beginAtZero: false,
                  },
                },
              ],
            },
            legend: {
              display: true,
            },
          },
        });
      });
    </script>
  </body>
</html>
